<template>
    <div class="tooltip-table">
        <div class="tooltip-tr" v-for="item,index in trs" :key="index">
            <div class="tooltip-td" v-for="td,index in item" :key="index">{{ td }}</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  name: 'TooltipTable'
})
export default class TooltipTable extends Vue {
    @Prop() private trs: any
}
</script>

<style lang="stylus" scoped>
.tooltip-table
  border: 1px solid #DCDFE6
  font-size: 12px
  .tooltip-tr:nth-child(odd)
    background: #f6f9fc
  .tooltip-tr:last-child
    border-bottom: none
  .tooltip-tr
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #DCDFE6
    .tooltip-td
      border-left: 1px solid #DCDFE6
      padding: 8px 8px
      display: inline-block
    .tooltip-td:first-child
      width: 120px
      border-left: none
    .tooltip-td:nth-child(2)
      width: 500px
</style>
